﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MultiSelect 多选</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
        
</head>
<body>
    <h1>MultiSelect 多选</h1>      

   <div style="padding-bottom:8px;">
        <input type="checkbox" for="allowUnselect" onclick="allowUnselect(this.checked)"/><label id="allowUnselect">allowUnselect</label>
        <input type="button" value="获取多选" onclick="getSelecteds()"/>
        <input type="button" value="设置多选" onclick="setSelecteds()"/>

    </div>
    
    <div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
        url="../data/AjaxService.jsp?method=SearchEmployees"      idField="id"
        multiSelect="true" 
    >
        <div property="columns">
            <div type="checkcolumn" ></div>
            <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
            <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
            <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
            <div field="salary" width="100" allowSort="true">薪资</div>                                    
            <div field="age" width="100" allowSort="true">年龄</div>
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
        </div>
    </div>
    

    
    <script type="text/javascript">
        mini.parse();
        
        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("loginname", "desc");

        function getSelecteds() {
            var rows = grid.getSelecteds();

            var s = "";
            for (var i = 0, l = rows.length; i < l; i++) {
                var row = rows[i];
                s += row.loginname;
                if (i != l - 1) s += ",";
            }
            alert(s);
        }
        function setSelecteds() {
            //根据条件获取行数组（示例获取“男”，也可以获取id，改变条件即可）
            var rows = grid.findRows(function (row) {
                if (row.gender == 1) return true;
                else return false
            });
            grid.selects(rows);
        }

        function allowUnselect(checked) {
            grid.setAllowUnselect(checked);
        }

        
        ///////////////////////////////////////////////////////       
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }

        grid.on("beforeselect", function (e) {
            if (e.record.gender == 2) e.cancel = true;
        });
        

    </script>

    <div class="description">
        <h3>Description</h3>
        <ol>
            <li>支持shift、ctrl多选</li>
            <li>设置allowUnselect="true"后，重复点击可以取消选择</li>
            <li>监听beforeselect禁止选择性别为“女”的行数据</li>
        </ol>
    </div>
</body>
</html>